/*doc
---
title: "Messages common styles"
name: messages-common-styles
category: Docs
subcategory: Placeholders
---

Common styles for messages, mostly resetting text styles and preventing layout quirks.

#### Source {messages-common-styles-source}

```scss
%a11y-before {
  border-radius: 0 !important;
  color: #fff !important;
  contain: content;
  display: block !important;
  font: 700 normal 14px/1.5 sans-serif !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif !important;
  height: auto !important;
  max-width: 100vw !important;
  padding: 4px !important;
  pointer-events: none !important;
  position: absolute !important;
  text-decoration: none !important;
  text-shadow: none !important;
  text-transform: none !important;
  transform: none !important;
  white-space: pre !important;
  width: auto !important;
}
```

##### Used by {messages-common-styles-usedby}

- [`a11y()` mixin](#Mixins-a11y)
*/
%a11y-before {
  border-radius: 0 !important;
  color: #fff !important;
  contain: content;
  display: block !important;
  font: 700 normal 14px/1.5 sans-serif !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif !important;
  height: auto !important;
  max-width: 100vw !important;
  padding: 4px !important;
  pointer-events: none !important;
  position: absolute !important;
  text-decoration: none !important;
  text-shadow: none !important;
  text-transform: none !important;
  transform: none !important;
  white-space: pre !important;
  width: auto !important;
}

/*doc
---
title: "Level-specific messages styles"
name: messages-level-styles
category: Docs
subcategory: Placeholders
---

Level-specific styles for messages, incrementing `counter` and enforcing `outline`.

#### Source {messages-level-styles-source}

```scss
@each $theme in map-keys($themes) {
  %a11y-#​{$theme} {
    counter-increment: unquote($theme) !important;
    outline: 4px solid theme-conf($theme, 'color') !important;
    outline-offset: -4px !important;
  }
}
```

##### Used by {messages-level-styles-usedby}

- [`a11y()` mixin](#Mixins-a11y)
*/
@each $theme in map-keys($themes) {
  %a11y-#{$theme} {
    counter-increment: unquote($theme) !important;
    outline: 4px solid theme-conf($theme, 'color') !important;
    outline-offset: -4px !important;
  }
}


/*doc
---
title: "Cancel a message"
name: message-cancellation
category: Docs
subcategory: Placeholders
---

Provides a way to cancel a message by resetting its core properties.

#### Source {message-cancellation-source}

```scss
%a11y-reset {
  counter-increment: none !important;
  outline: 0 !important;

  &::after,
  & + ::before {
    content: '' !important;
    display: none !important;
  }
}
```

##### Used by {message-cancellation-usedby}

- [Missing `[role="search"]` advice](/advices.html#missing-role)
- [`[placeholder]` can't replace a `label` advice](/advices.html#placeholder)
- [Most of DOM nodes shouldn't be `:empty` warning](/warnings.html#empty-nodes)
- [Form `button` error](/errors.html#not-form-button)
- [`[type="radio"]` outside a `fieldset` error](/errors.html#radio-group)
*/
%a11y-reset {
  counter-increment: none !important;
  outline: 0 !important;

  &::after,
  & + ::before {
    content: '' !important;
    display: none !important;
  }
}

/*doc
---
title: "Display <head> children"
name: head-children
category: Docs
subcategory: Placeholders
---

Displays elements in `<head>`, to allow their messages to appear.

#### Source {head-children-source}

```scss
%a11y-head {
  display: block !important;
}
```

##### Used by {head-children-usedby}

- [`a11y-head()` mixin](#Mixins-a11y-head)
*/
%a11y-head {
  display: block !important;
}
